<template>
  <div class="my-order page">
    <div class="content" ref="webview">
      <div class="hd-bar">
        <van-nav-bar title="我的订单" :fixed="isNavFixed" :class="{bg_transparent:!isNavFixed, bg_white: isNavFixed}"
          left-arrow @click-left="routerGo"></van-nav-bar>
        <div class="order-pay-info">
          <div class="info">
            <span class="name" v-if="orderInfo.order_status== -1 || orderInfo.order_status== -4">已取消</span>
            <span class="name" v-if="orderInfo.order_status== 1">待收货</span>
            <span class="name" v-if="orderInfo.order_status== -2">待付款</span>
            <span class="name" v-if="orderInfo.order_status== 2">已完成</span>
            <span class="name" v-if="orderInfo.order_status== 0">待发货</span>
            <span class="name" v-if="orderInfo.order_status== -3">会员拒收</span>
            <span class="p">
              <template v-if="orderInfo.order_status== -2">
                还剩
                <van-count-down class="time" :time="payEndTime" format="mm分ss秒" />自动取消
              </template>
              <template v-if="orderInfo.order_status== -1 && confirmTime > 0">
                还剩
                <van-count-down class="time" :time="time" format="mm分ss秒" />自动确认
              </template>
              <template v-else-if="orderInfo.order_status==-1 && payEndTime < 0">
                当前订单已取消
              </template>
              <template v-else-if="orderInfo.order_status==-4">
                系统自动取消
              </template>
              <template v-else-if="orderInfo.order_status==-1 && payEndTime < 0">
                订单已经完成了，期待你下次继续购买
              </template>
              <template v-else-if="orderInfo.order_status==0">
                订单已收到，我们会尽快发货
              </template>
              <template v-else-if="orderInfo.order_status==-1">
                我们会尽快发货
              </template>
              <template v-else-if="orderInfo.order_status==1">
                商品已发货，收到货请尽快确认
              </template>
              <template v-else-if="orderInfo.order_status==2">
                订单已经完成了，期待你下次继续购买
              </template>
            </span>
          </div>
        </div>
      </div>
      <div class="user-info">
        <div class="rows van-hairline-j--bottom" v-if="orderInfo.order_status==1 || orderInfo.order_status==2">
          <div class="icon icon-logistics"></div>
          <div class="info">
            <div class="p">快递单号：{{orderInfo.express_no}}
              <span class="icon-copy" v-clipboard:copy="orderInfo.express_no" v-clipboard:success="onCopy"
                v-clipboard:error="onError"></span>
            </div>
          </div>
        </div>
        <div class="rows" v-if="orderInfo.user_name && orderInfo.user_phone && orderInfo.user_address">
          <div class="icon icon-address"></div>
          <div class="info">
            <div class="name">{{ orderInfo.user_name }}
              <span class="tel">{{ orderInfo.user_phone | phoneFilter}}</span>（收）</div>
            <div class="p">{{ orderInfo.prov_name }}{{ orderInfo.city_name }}{{ orderInfo.area_name }}{{
              orderInfo.user_address }}</div>
          </div>
        </div>
      </div>
      <div class="product-box">
        <div class="comments-stroe">
          <span class="name">{{orderInfo.shop_name}}</span>
        </div>
        <template v-for="(item,key) in goodsList">
          <div class="product-info" :key="key" @click="$router.push({'path':'/mall/goods?sn='+item.good_sn})">
            <div class="imgPath">
              <van-image :width="$tools.toPX(150)" :height="$tools.toPX(150)" fit="contain" lazy-load :src="item.goods_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="24" />
                </template>
              </van-image>
            </div>
            <div class="detail">
              <div class="info">
                <div class="name van-multi-ellipsis--l2">{{item.goods_name}}</div>
                <div class="m-price">{{item.goods_price}}</div>
              </div>
              <div class="price-num">
                <div class="spec">{{item.goods_spec_names}}</div>
                <div class="num">x{{item.goods_num}}</div>
              </div>
            </div>
          </div>
        </template>
        <div class="goods-info">
          <div class="info">
            <span>商品总价</span>
            <span class="m-price">{{orderInfo.goods_money}}</span>
          </div>
          <div class="info">
            <span>运费险</span>
            <span class="m-price">{{orderInfo.deliver_money}}</span>
          </div>
          <div class="info">
            <span>优惠劵</span>
            <span>
              <span class="m-price">{{orderInfo.coupon_price}}</span>
            </span>
          </div>
          <div class="info total">
            <span>实付金额</span>
            <span>
              <span class="m-price">{{orderInfo.goods_money + orderInfo.deliver_money - orderInfo.coupon_price}}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="order-details-info">
        <div class="title">订单信息</div>
        <div class="p">订单编号: {{ orderInfo.order_no }}</div>
        <div class="p">创建时间: {{ orderInfo.create_time }}</div>
        <div class="p" v-if="orderInfo.pay_time">付款时间: {{orderInfo.pay_time}}</div>
        <div class="p" v-if="orderInfo.delivery_time">发货时间: {{orderInfo.delivery_time}}</div>
        <div class="p" v-if="orderInfo.receiving_time">成交时间: {{orderInfo.receiving_time}}</div>
        <div class="p" v-if="orderInfo.cancel_time">取消时间: {{orderInfo.cancel_time}}</div>
        <div class="p" v-if="orderInfo.receive_time">完成时间: {{orderInfo.receive_time}}</div>
      </div>
    </div>
    <div class="operation" v-if="orderInfo.order_status === -2 || orderInfo.order_status === 2 || orderInfo.order_status === 1 || orderInfo.order_status === -1">
      <span class="cancel" v-if="orderInfo.order_status==-2" @click="cancelOrder">取消订单</span>
      <!-- <span class="buy" v-if="orderInfo.order_status==2" @click="OrderyBuy">再次购买</span> -->
      <span class="confirm" v-if="orderInfo.order_status==2" @click="evaluation">立即评价</span>
      <span class="pay" v-if="orderInfo.order_status === -2" @click.stop="payGoods()">付款
        <van-count-down class="time" :time="payEndTime" @finish="countDownFinish" format="mm:ss" />
      </span>
      <span class="confirm" v-if="orderInfo.order_status==1" @click="isPopupShow=true">确认收货</span>
    </div>
    <van-popup v-model="isPopupShow" round position="bottom">
      <div class="confirm-goods">
        <div class="title_name">确认收货</div>
        <div class="confirm_info">您是否确认已经收到以下订单的商品？</div>
        <div class="slot">
          <span class="c1">订单编号：{{orderInfo.order_no}}</span>
        </div>
        <div class="tis">谨慎操作，如尚未收到商品，请不要点击确认！</div>
        <div class="submit">
          <span class="btn cancel" @click="isPopupShow= false">取消</span>
          <span class="btn confirm" @click="confirmrRecv">
            <template v-if="isLoading">
              <van-loading size="26" color="#ff0000" />
            </template>
            <template v-else>
              确认收货
            </template>
          </span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import dayjs from 'dayjs';
export default {
  name: 'orderDetails',
  data() {
    return {
      isNavFixed: false,
      dataList: [],
      isLoading: false,
      orderInfo: {},
      payEndTime: 0,
      confirmTime: 0,
      goodsList: [],
      isPopupShow: false
    };
  },
  inject: ['goLink'],
  created() {
    this.fetchOrderDetail();
  },
  mounted() {
    this.$nextTick(() => {
      // 监听滚动条
      this.$BUS.$on('scroll', data => {
        this.setStatusBarStyle(data > 10 ? 'dark' : 'light');
        this.isNavFixed = data > 10;
      });
    });
  },
  methods: {
    onCopy() {
      this.$toast('复制成功');
    },
    onError() {
      this.$toast('复制失败');
    },
    // 计时完成后刷新
    countDownFinish() {
      this.fetchOrderDetail();
    },
    // 去付款
    payGoods() {},
    routerGo() {
      // this.$store.dispatch('setRouterIndex', {
      //   toIndex: 1,
      //   formIndex: 2
      // });
      this.$router.go(-1);
    },
    // 取消订单
    cancelOrder() {
      this.$dialog
        .confirm({
          title: '温馨提醒',
          message: '确定取消该订单吗？',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        .then(() => {})
        .catch(() => {
          this.$API.order.cancel({ id: this.$route.query.id }).then(res => {
            if (!res.code) {
              this.$toast('取消成功');
            } else {
              this.$toast(res.message);
            }
          });
          // on cancel
        });
    },
    // 确认收货
    confirmrRecv() {
      this.isLoading = true;
      this.$API.order
        .receive(
          {
            id: this.orderInfo.id
          },
          'recv'
        )
        .then(res => {
          if (!res.code) {
            this.isPopupShow = false;
            this.$toast('收货成功');
            this.fetchOrderDetail();
            this.isPopupShow = false;
            this.isLoading = false;
          } else {
            this.$toast(res.message);
            this.isLoading = false;
          }
        });
    },

    // 立即评价
    evaluation(sn) {
      // this.$router.push({ 'path': '/comments/list', query: { isGolink: true } });

      //by pss 立即评价跳转至评价页面
      this.$router.push({ path: '/comments/from', query: { id: this.orderInfo.id } });

      // this.goLink(2, 1, () => {
      //   this.$router.push({ 'path': '/comments/list', query: { isGolink: true } });
      // });
    },
    setStatusBarStyle(data) {
      // 设置状态栏颜色
      window.api &&
        window.api.setStatusBarStyle({
          style: data,
          color: 'transparent'
        });
    },
    // 初始化数据
    fetchOrderDetail() {
      const options = { id: this.$route.query.id };
      this.$API.user.order(options, 'detail').then(res => {
        if (!res.code) {
          this.orderInfo = res.data.orderObj;
          this.goodsList = res.data.goodsList;
          var _time = new Date(res.data.deliver_time).getTime() + 604800 * 1000;
          this.confirmTime = dayjs(_time).diff(dayjs(new Date().getTime()), 'second') * 1000;
          this.payEndTime = res.data.payEndTime;
        } else {
          this.$toast('获取失败');
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.my-order {
  height: 100%;
  display: flex;
  flex-direction: column;
  .product-box {
    margin: 35px 0 0 0;
    padding: 20px 35px 5px;
  }
  .hd-bar {
    background-image: url('/static/img/icon-order-top-bg.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 285px;
    .order-pay-info {
      display: flex;
      justify-content: space-between;
      padding: 20px 40px;
      .info {
        color: #fff;
        .name {
          font-size: 36px;
        }
        .p {
          font-size: 28px;
          font-weight: 300;
          padding: 10px 0;
          display: block;
          color: #fff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .van-count-down {
            color: #fff;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .goods-info {
    margin: 0 -40px;
    .info.total {
      color: #353535;
      font-size: 30px;
      margin-top: 10px;
    }
    .info {
      display: flex;
      justify-content: space-between;
      color: #959595;
      font-size: 26px;
      line-height: 55px;
      .m-price {
        color: #ff0000;
        font-size: 28px;
      }
    }
  }
  .user-info {
    background-color: #fff;
    border-radius: 25px;
    margin-top: -35px;
    .rows {
      display: flex;
      align-items: center;
      padding: 31px 0;
      margin: 0 20px;
      .icon {
        width: 80px;
        height: 80px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 80px 80px;
      }
      .icon-logistics {
        background-image: url('/static/images/icon-logistics.png');
      }
      .icon-address {
        background-image: url('/static/images/icon-order-adderss.png');
      }
      .info {
        flex: 1;
        padding: 0 30px;
        font-size: 28px;
        color: #353535;
        .name {
          display: flex;
          font-weight: 500;
          .text {
            display: inline-block;
          }
        }
        .p {
          padding-top: 10px;
          .icon-copy {
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image: url('/static/images/icon-copy-active.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 26px 26px;
            margin-left: 15px;
          }
        }
      }
    }
  }
  .goods-info {
    background-color: #fff;
    padding: 20px 40px;
    margin-top: 20px;
  }
  .order-details-info {
    font-size: 28px;
    margin: 20px 0;
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 20px;
    .title {
      padding: 10px 0;
      font-weight: 500;
      color: #353535;
    }
    .p {
      padding: 10px 0;
      color: #555;
      font-size: 26px;
    }
  }
  .operation {
    text-align: right;
    padding: 15px 21px;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee; /*no*/
    // .confirm {
    //   padding: 0 30px;
    //   height: 75px;
    //   line-height: 75px;
    //   border-radius: 75px;
    //   border: 1px solid #ff0000; /*no*/
    //   color: #ff0000;
    //   font-size: 28px;
    //   display: inline-block;
    // }
    .confirm,
    .buy,
    .cancel,
    .pay {
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 24px;
      border-radius: 60px;
      margin-left: 15px;
      font-size: 28px;
    }
    .confirm {
      width: 216px;
    }
    .confirm,
    .pay {
      background-color: #ff0000;
      .time {
        color: #fff;
        margin-left: 5px;
      }
    }
    .pay {
      width: 220px;
      &::before {
        content: '';
        display: block;
        height: 30px;
        width: 30px;
        background-image: url('/static/img/icon-order-time.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 30px 30px;
        margin-right: 10px;
      }
    }
    .buy {
      color: #ff0000;
      border: 1px solid #ff0000;
    }
    .cancel {
      color: #353535;
      border: 1px solid #999;
    }
  }
  .confirm-goods {
    padding: 20px 40px 0;
    .title_name {
      font-size: 40px;
      color: #353535;
      padding: 15px 0 0;
      text-align: center;
    }
    .confirm_info {
      padding: 30px 0;
      color: #353535;
      font-size: 34px;
      text-align: center;
    }
    .tis {
      padding: 30px 0;
      color: #555;
      font-size: 24px;
      text-align: center;
    }
    .info {
      padding: 15px 20px;
    }
    .slot {
      font-size: 32px;
      color: #ff0000;
      text-align: center;
    }
    .submit {
      display: flex;
      margin: 0 -40px;
      border-top: 1px solid #eee; /*no*/
      .btn {
        flex: 1;
        font-size: 34px;
        padding: 34px 0 31px;
        text-align: center;
      }
      .btn:first-child {
        border-right: 1px solid #eee; /*no*/
      }
      .cancel {
        color: #999;
      }
      .confirm {
        color: #ff0000;
      }
    }
  }
}
</style>
